<template>
	<view class="contant">
		<view class="vote"></view>
		<view style="position: relative; z-index: 9; padding-bottom: 50px">
			<u-sticky offset-top="0">
				<view :class="[art == 1 ? 'tops' : '']">
					<!-- #ifdef APP -->
					<view style="height: 44px"></view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view style="height: 10px"></view>
					<!-- #endif -->
					<view style="
							text-align: center;
							font-size: 16px;
							font-weight: 400;
							font-weight: bold;
							color: #333333;
							line-height: 44px;
						">
						我的团队
					</view>
				</view>
			</u-sticky>
			<view style="padding: 15px">
				<view class=" cont">
					<view class="" style="padding: 34px 17px 8px;">
						<view class="flex" style="justify-content: space-between;width: 100%;">
							<view class="flex">
								<view class="flex" style="position: relative;border-radius: 10px;
										">
									<!-- <image style="width: 40px" src="/static/img/63.png" mode="widthFix"></image> -->
									<view style="margin-left: 15px">
										<view class="flex">
											<view style="font-size: 12px; color: #767c86">团队总人数</view>
											<view style="position: relative;padding-left: 5px;">
												<u-icon @click.native.stop="btn_flag(1)" name="question-circle"
													color="#FE9157" size="18"></u-icon>
												<view v-show="tipsItem == 1" class="tips">{{ com_info.teamallnumtips }}
												</view>
											</view>
										</view>
										<view
											style="font-size: 16px; font-weight: bold; color: #364EF6;margin-top: 10px;">
											{{ info.totalTeamNum == null ? 0 : info.totalTeamNum }}
										</view>

									</view>
								</view>
								<view class="flex" style="  border-radius: 10px; ">
									<!-- <image style="width: 40px" src="/static/img/64.png" mode="widthFix"></image> -->
									<view style="margin-left: 15px">
										<view class="flex" style="position: relative;">
											<view style="font-size: 12px; color: #767c86">团队总收益</view>
											<view style="" style="position: relative;padding-left: 5px;">
												<u-icon @click.native.stop="btn_flag(2)" name="question-circle"
													color="#FE9157" size="18"></u-icon>
												<view v-show="tipsItem == 2" class="tips">
													{{ com_info.teamsumincometips }}
												</view>
											</view>
										</view>
										<view
											style="font-size: 16px; font-weight: bold; color: #364EF6;margin-top: 10px;">
											￥{{ info.totalTeamRevenue == null ? 0 : info.totalTeamRevenue }}
										</view>

									</view>
								</view>
							</view>
							<view class="mecon flex" style="justify-content: center;">
								<view @click="under" class="flex" style="justify-content: center;">
									<text
										style="font-size: 10px;font-weight: bold;color: #274272;line-height: 20px;padding-right: 5px;">查看我的直属下级</text>
									<u-icon name="arrow-right" color="#274272" size="10"></u-icon>
								</view>
							</view>
						</view>
						<view class="xiacon" style="margin-top: 19px;">
							<view class="" style="padding: 3px 18px;">
								<view @click="setting" class="flex" style="justify-content: flex-end;">
									<text
										style="font-size: 10px;font-weight: 400;color: #FFFFFF;padding-left: 6px;">代理价格设置</text>
									<u-icon name="arrow-right" size="10" color="#fff"></u-icon>
								</view>
								<view class="flex">
									<image style="width: 28px;height: 34px;" src="/static/font/59.png" mode=""></image>
									<view class="flex">
										<view style="font-size: 14px; color: #1B1C3A; font-weight: 400">请设置邀请下级抽成比例如：
										</view>
										<view style="font-size: 14px; color: #1B1C3A; font-weight: 400">
											{{ info.tackPercentage == null ? 0 : info.tackPercentage }}%
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="hbcom" style="margin-top: 15px;">
					<view class="flex" style="padding: 16px 15px 12px;">
						<view class="flex" style="flex-direction: column;align-items: flex-start;">
							<text style="font-size: 8px;font-weight: 400;color: #305FC5;">Invitation poster</text>
							<text
								style="font-size: 16px;font-weight: 400;color: #305FC5;padding: 8px 0 13px;">海报邀请</text>
							<view class="flex" style="background: linear-gradient(152deg, #5A8FF5, #4A61F6);box-shadow: 0px 6px 9px 0px rgba(79,120,234,0.52);border-radius: 11px;
							justify-content: center;">
								<view  @click="proview(0)" class="flex" style="padding: 7px 9px;">
									<text style="font-size: 8px;font-weight: 500;color: #FFFFFF;">立即查看</text>
									<view class="flex"
										style="width: 10px;height: 10px;justify-content: center;background-color: #95B9F5;border-radius: 50%;margin-left: 3px;">
										<u-icon name="arrow-right" size="6px"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="overflow-y: auto;padding-left: 25px;width: 73%;">
							<view class="img_arr" style="display: flex" v-if="invite_img != ''">
								<u--image @click="proview(i)" v-for="(it, i) in invite_img" :key="i" :showLoading="true"
									class="imgs" :src="it" width="104px" height="85px" mode="widthFix"
									:lazy-load="true">
									<template v-slot:loading>
										<u-loading-icon color="#364ef6"></u-loading-icon>
									</template>
								</u--image>
								<!-- <image  v-for="it,i in invite_img" :key="i" 
									style="width: 228px;" :src="it" mode="widthFix"></image> -->
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="margin-top: 15px">
					<u-button @click="under" type="primary" text="查看我的直属下级"></u-button>
				</view> -->
				<!-- <view style="margin-top: 15px;">
					<u-swiper height="180" :list="list1"></u-swiper>
				</view> -->
				<!-- <view class="flex" style="
						margin-top: 15px;
						padding: 15px 10px;
						justify-content: space-between;
						background: #ffffff;
						border-radius: 10px;
					">
					<view class="flex">
						<view style="font-size: 14px; color: #1d1f20; font-weight: 400">请设置邀请下级抽成比例如：</view>
						<view style="font-size: 14px; color: #ff3331; font-weight: 400">
							{{ info.tackPercentage == null ? 0 : info.tackPercentage }}%
						</view>
					</view>
					<view @click="setting"
						style="padding: 5px 5px; border-radius: 5px; background-color: #ff3331; color: #ffffff; font-size: 14px">
						代理价格设置
					</view>
				</view> -->
				<!-- <view style="margin-top: 30px">
					<view style="font-size: 16px; font-weight: bold; color: #1d1f20">海报邀请</view>
					<view class="img_arr" style="display: flex" v-if="invite_img != ''">
						<u--image @click="proview(i)" v-for="(it, i) in invite_img" :key="i" :showLoading="true"
							class="imgs" :src="it" width="228px" height="362px" mode="widthFix" :lazy-load="true">
							<template v-slot:loading>
								<u-loading-icon color="#FF3331"></u-loading-icon>
							</template>
						</u--image>
						
					</view>
					
				</view> -->
				<view style="margin-top: 30px">
					<view style="font-size: 16px; font-weight: bold; color: #1d1f20">邀请教程</view>
					<view class="invite">
						<u-parse :content="info.invitationTutorial"></u-parse>
					</view>
				</view>
			</view>

			<!-- <view class="flex" style="justify-content: center;margin-top: 30px;">
				<image style="width: 73px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
			</view> -->
		</view>
		<u-modal @close="close" :closeOnClickOverlay="true" confirmColor="#fff" confirmText="联系客服"
			confirmButtonShape="circle" :show="show_a" :title="title" :content="contents">
			<view slot="confirmButton" @click="tab_kefu">
				<u-button shape="circle" type="primary" text="联系客服"></u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				info: '',
				invite_img: [],
				title: '提示',
				// contents: `不好意思!您当前已超出规定邀请层级，不能直接邀请下级，请联系客服或成为合伙人即可邀请下级赚钱`,
				contents: `您好，您账号无需邀请团队，自行在平台申请项目做单即可！`,
				show_a: false,
				list1: [],
				content: '',
				com_info: '',
				art: 0,
				tipsItem: -1,
			};
		},
		onLoad() {
			this.common();
		},
		onShow() {
			this.tipsItem = -1;
			this.teamIndex();
		},
		onPageScroll(e) {
			if (e.scrollTop >= 44) {
				this.art = 1;
			} else {
				this.art = 0;
			}
		},
		methods: {
			close() {
				this.show_a = false;
				uni.switchTab({
					url: 'me',
				});
			},
			tab_kefu() {
				// #ifdef H5
				window.location.href = this.com_info.wxCustomerService;
				// #endif
				// #ifdef APP
				plus.runtime.openURL(this.com_info.wxCustomerService);
				// #endif
			},
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			async teamIndex() {
				let res = await this.$http.car.teamIndex({});
				if (res.code == 1) {
					this.info = res.data;
					// this.list1.push()
					this.list1 = res.data.invitationBg.map((it) => {
						return (it = this.imgurl + it);
					});
					this.invite_img = res.data.teamReport.map((it) => {
						return (it = this.imgurl + it);
					});
				} else if (res.code == 201) {
					this.show_a = true;
				} else {
					this.$tips(res.msg);
				}
			},
			//预览
			proview(index) {
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: this.invite_img, // 需要预览的图片列表，photoList要求必须是数组
					loop: true, // 是否可循环预览
				});
			},
			under() {
				uni.navigateTo({
					url: '/pages/team/under',
				});
			},
			setting() {
				uni.navigateTo({
					url: '/pages/team/setting',
				});
			},
			btn_flag(id) {
				if (this.tipsItem == id) {
					this.tipsItem = -1;
				} else {
					this.tipsItem = id;
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	.tops {
		// background-image: url('@/static/img/73.png');
		background-color: #2447FF;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 10000;
	}

	.img_arr {
		overflow: auto;
		width: 100%;
		white-space: nowrap;
	}

	.invite {
		margin-top: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 10px;

		/deep/ p {
			word-wrap: break-word;
		}
	}

	.imgs {
		margin-right: 15px;
		// margin-top: 15px;
		border-radius: 10px;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF;
	}

	/deep/ .u-button--square {
		border-radius: 10px !important;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.cont {
		background-image: url('@/static/font/48.png');
		height: 158px;
		width: 100%;
		background-size: 100% 100%;

	}

	.contant {
		.vote {
			background-image: url('@/static/font/58.png');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 100%;
			position: fixed;
			height: 354px;
		}
	}

	.tips {
		background-color: #2447FF;
		padding: 13px 15px 8px;
		font-size: 12px;
		color: #ffffff;
		position: absolute;
		width: 150px;
		left: -100%;
		top: 110%;
		z-index: 20;
		border-radius: 10px;
	}

	.mecon {
		background-image: url('@/static/font/49.png');
		height: 42px;
		width: 112px;
		background-size: 100% 100%;
	}

	.xiacon {
		background-image: url('@/static/font/51.png');
		height: 60px;
		width: 100%;
		background-size: 100% 100%;
	}

	.hbcom {
		background-image: url('@/static/font/50.png');
		height: 113px;
		width: 100%;
		background-size: 100% 100%;
	}

	/deep/.u-image__image {
		border-radius: 10px !important;
	}
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>